<template>
  <div class="maintainUnfinish">
    <van-nav-bar @click-left='goBack()' left-arrow="" title="未完成保养设备">
    	<repair :status='false'></repair>
    </van-nav-bar>
    <div class="area">
    	<van-search placeholder="搜索关键字" @focus='showkeywords=true'></van-search>
    	<div class="keywords" v-if="showkeywords">

    		<van-button type="default" @click='showkeywords=false'>设备编号</van-button>
        <van-button type="default" @click='showkeywords=false'>设备名称</van-button>
    		<van-button type="default" @click='showkeywords=false'>保养单号</van-button>
    	</div>

    </div>
    <div class="info">
    	<div class="numCell">
    		<van-cell :border="false" title="设备编号" value="v201" value-class='num'></van-cell>
    	</div>
    	<van-cell title="设备名称" :border="false" value="卸料阀"></van-cell>
    	<van-cell title="保养次数" value="0" :border="false"></van-cell>
    	<van-cell title="保养员/部门" value="储罐区" :border="false"></van-cell>
    	<van-cell title="上次保养时间" value="2019-11-11" :border="false"></van-cell>
    	<van-cell title="状态" value="待保养" :border="false"></van-cell>
    	<van-cell is-link="" @click='toast'>
    		<span class="toRepair">确认已保养</span>
    		<img src="" slot='right-icon' />
    	</van-cell>
    </div>
    <div class="info">
    	<div class="numCell">
    		<van-cell :border="false" title="设备编号" value="v201" value-class='num'></van-cell>
    	</div>
    	<van-cell title="设备名称" :border="false" value="卸料阀"></van-cell>
    	<van-cell title="保养次数" value="0" :border="false"></van-cell>
    	<van-cell title="保养员/部门" value="储罐区" :border="false"></van-cell>
    	<van-cell title="上次保养时间" value="2019-11-11" :border="false"></van-cell>
    	<van-cell title="状态" value="待保养" :border="false"></van-cell>
    	<van-cell is-link="" @click="toast">
    		<span class="toRepair">确认已保养</span>
    		<img src="" slot='right-icon' />
    	</van-cell>
    </div>
  </div>
</template>

<script>
  import {Toast} from 'vant'
  export default{
    data(){
      return {
        showkeywords:false,
      }
    },
    methods:{
      toast(){
        Toast.success({message:'设备已保养',duration:800})
      }
    }
  }
</script>

<style scoped="scoped">
van-button {
		color: #999;
	}

	.van-button--default {
		border: none;
		color: #999999;
	}

	.keywords {
		font-size: .8rem;
		margin-bottom: .8rem;
	}
	.numCell{
		padding-bottom: .5rem;
		border-bottom: 1px solid #EEEEEE;
	}
	.num{
		font-size: .9rem;
		color: #222;
		font-weight: bold;
	}
	.van-cell {
		padding: .3rem 1rem !important;
		color: #969799;
	}

	.repairCard {
		padding: .6rem;
		margin-top: .5rem;
	}

	.info {
		box-shadow: 2px 2px 5px #ADADAD;
    margin: 1rem 1rem;

	}

	.toRepair {
		display: flex;
		justify-content: center;
		border-top: 1px solid #EEEEEE;
		font-size: .8rem;
		color: red;
		padding-top: .5rem;
	}

</style>
